<template>
	<div class="container-b">
		<div class="container">
			<div class="header">
				<div class="left">
					<img class="logo" src="/static/logo.png" alt="" />
					<span>留今</span>
				</div>
				<div class="search">
					<div class="input-wrapper">
						<input type="text" v-model="keyword" placeholder="搜索您感兴趣的信息">
					</div>

					<div class="btn" @click="toSearch()">搜索</div>
				</div>
				<div class="right">
					<!-- <img class="qr" src="/static/guide/qrcode.png" alt="" />
					<div class="tip">
						<div class="tip-name">手机留今</div>
						<div class="tip-desc">更多功能</div>
					</div> -->
				</div>
			</div>
			<div class="wl">
				<div class="logo-wrap" @click="selectEngine(0)" :class="currentLogo == 0?'select-active':''">
					<image class="logo" src="/static/wy/th.png" mode="" style="width: 107px;height: 20px;"></image>
				</div>
				<div class="logo-wrap" @click="selectEngine(1)" :class="currentLogo == 1?'select-active':''">
					<image class="logo" src="/static/wy/360.svg" mode="" style="width: 110px;height: 25px;"></image>
				</div>
				<div class="logo-wrap" @click="selectEngine(2)" :class="currentLogo == 2?'select-active':''">
					<image class="logo" src="/static/wy/baidu.png" mode=""
						style="width: 80px;height: 30px;margin-top: -10px;"></image>
				</div>
				<div class="logo-wrap" @click="selectEngine(3)" :class="currentLogo == 3?'select-active':''">
					<image class="logo" src="/static/wy/sougou.png" mode="" style="width: 100px;height: 25px;"></image>
				</div>
			</div>
			<div class="nav">
				<div class="nav-title">名站导航 Network information navigation</div>
				<div class="tab-list">
					<div class="top">
						<div class="top-item" v-for="(item,index) in topLinkList"
							@longtap="tagLongTap(item.linkId,item.linkName,true)" @click="tagUrlClick(item.link)">
							{{item.linkName}}

						</div>
					</div>
					<div class="tab">
						<div class="tab-item"
							:class="index%4==0 ?'red':index%4==1 ?'blue':index%4==2 ?'yellow':index%4==3 ?'green':''"
							v-for="(item,index) in linkList" @longtap="tagLongTap(item.id,item.name,item.isAdd)"
							@click="tagUrlClick(item.link)">
							{{item.name}}
						</div>
					</div>
					<div class="chart-title">
						今指数 Today's index
					</div>

					<div class="chart-tubiao" id="chart_tubiao"><l-f2 ref="tubiao"></l-f2></div>
					<div class="chart-sub-title">
						今指数由用户得分形成，体现大家自身状态和面临环境的落差</br>
						Today's index is formed by user scores, reflecting the state of everyone and the heat of the
						environment they face
					</div>
				</div>

			</div>
			<div class="content-index">
				<div class="tui-header-center">
					<image v-if="userInfo.avatarPath" :src="userInfo.avatarPath || '/static/logo.png'"
						class="tui-avatar" mode="aspectFill" @click="$navSkin.toDetail()"></image>
					<image v-else src="/static/logo.png" class="tui-avatar" mode="aspectFill" @click="toLogin"></image>
					<div class="tui-info">
						<div class="tui-nickname" v-if="userInfo.nickname">{{userInfo.nickname}}</div>
						<div class="tui-nickname" v-else @click.stop="toLogin()">点此登录</div>
						<div v-if="userInfo.followCount" class="tui-explain" @click="$navSkin.toDetail()">
							<span>关注：{{userInfo.followCount || '0'}}</span>
							<span>粉丝：{{userInfo.fansCount || '0'}}</span>
						</div>
					</div>
					<div class="tui-btn-edit">
						<div class="news">
							<div class="unread" v-if="userInfo.unreadCount>0"></div>
							<image src="/static/icons/icon_xiaoxi.png" mode="" @click="toNotice()"></image>
						</div>
						<image src="/static/icons/set.png" mode="" @click="$navSkin.toSetting()"></image>
						<image src="/static/icons/icon_tianjia.png" mode="" @click="$navSkin.toSearch()"></image>
					</div>
				</div>
				<div class="topic-header">
					<div class="left">
						<span>{{$utils.getNowFormatDate()}}&nbsp;&nbsp;&nbsp;&nbsp;{{$utils.week()}}</span>
					</div>
					<div class="right">
						<div class="userInfo">
							<image class="user-img" :src="userInfo.avatarPath" mode="aspectFill"></image>
							<div class="user-num">{{userInfo.myIndex || '000'}}</div>
						</div>
						<div class="userInfo">
							<image class="user-img" :src="userInfo.lastUpdateAvatar" mode="aspectFill"></image>
							<div class="user-num">{{userInfo.lastUpdateIndex || '000'}}</div>
						</div>
					</div>
				</div>
				<div class="topic-body">
					<div class="tab-nav">
						<div class="tab-content">
							<div class="tab-head">
								<div>今日动态</div>
								<div>Today's situation</div>
							</div>
							<div class="tab-center">
								<div class="tab">
									<div class="tab-item"
										:style="current == index? 'background:'+ item.colorLight+';color:#ffffff;'+'border: 2rpx solid '+item.colorLight :''"
										v-for="(item,index) in classify" v-if="index%3==0" :key="index"
										@click="selectTab(index,item.colorLight,item.id,item.name)">{{item.name}}</div>
								</div>
								<div class="tab">
									<div class="tab-item"
										:style="current == index? 'background:'+ item.colorLight+';color:#ffffff;'+'border: 2rpx solid '+item.colorLight :''"
										v-for="(item,index) in classify" v-if="index%3==1" :key="index"
										@click="selectTab(index,item.colorLight,item.id,item.name)">{{item.name}}</div>
								</div>
								<div class="tab">
									<div class="tab-item"
										:style="current == index? 'background:'+ item.colorLight+';color:#ffffff;'+'border: 2rpx solid '+item.colorLight :''"
										v-for="(item,index) in classify" v-if="index%3==2" :key="index"
										@click="selectTab(index,item.colorLight,item.id,item.name)">{{item.name}}</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 标签 -->
					<div class="lab-title">《{{current_typeName}}》Lists</div>
					<div class="topic-center">
						<div class="topic-list">
							<div :style="item.clicked? 'background:'+ currentColor+';color:#ffffff;'+'border: 2rpx solid '+currentColor :'color:'+currentColor+';border: 2rpx solid '+currentColor"
								class="topic-item" @longtap="openTagSecret(item.id,item.name)"
								@click="tagClick(item.id,index,item.points)" v-if="index%3==0"
								v-for="(item,index) in topicList">{{item.name}}</div>
						</div>
						<div class="topic-list">
							<div :style="item.clicked? 'background:'+ currentColor+';color:#ffffff;'+'border: 2rpx solid '+currentColor :'color:'+currentColor+';border: 2rpx solid '+currentColor"
								class="topic-item" @longtap="openTagSecret(item.id,item.name)"
								@click="tagClick(item.id,index,item.points)" v-if="index%3==1"
								v-for="(item,index) in topicList">{{item.name}}</div>
						</div>
						<div class="topic-list">
							<div :style="item.clicked? 'background:'+ currentColor+';color:#ffffff;'+'border: 2rpx solid '+currentColor :'color:'+currentColor+';border: 2rpx solid '+currentColor"
								class="topic-item" @longtap="openTagSecret(item.id,item.name)"
								@click="tagClick(item.id,index,item.points)" v-if="index%3==2"
								v-for="(item,index) in topicList">{{item.name}}</div>
						</div>
					</div>
					<!-- <div class="footer" v-if="current == 0 && urlVerify">
					<a href="https://beian.miit.gov.cn/#/Integrated/recordQuery">粤ICP备2022146056号</a>
					<a class="record" target="_blank"
						href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44011102003394">
						<img src="//img.ljcdn.com/beike/conch/1579143669032.png" />
						<div class="title">粤公网安备 44011102003394号</div>
					</a>
				</div> -->
				</div>
				<div class="chart-canvas">
					<div class="chart-head">
						<div class="chart-head-left">
							我的今指数 My Today Index
						</div>
						<div class="chart-head-right">
							<image @click="toSend()" class="snapshot" src="/static/icons/icon_xiangji.png"
								mode="aspectFill"></image>
							<image @click="toMyTodayData" class="arrow" src="../../static/icons/icon_zhankai.png"
								mode="aspectFill"></image>
						</div>
					</div>
					<div class="chart-body" id="chart_canvas"><l-f2 ref="todayIndex"></l-f2></div>
				</div>
				<!-- 标签列表 -->
				<tag :list="recordList" :mySelf="true"></tag>

				<div class="topic-body">
					<div class="section">
						<div class="title">我的影子 My shadow</div>
						<div class="tab-section">
							<div class="tab-item" :class="{'active':timeCurrent == item.id}"
								v-for="(item,index) in timeTab" :key="index" @click="selectTime(item.id)">
								{{item.name}}
							</div>

						</div>
						<div class="user-section">
							<div class="left">
								<div class="my-wrapper">
									<div class="border-1" v-if="shadowList[0]"></div>
									<div class="border-2" v-if="shadowList[1]"></div>
									<div class="border-3" v-if="shadowList[2]"></div>
									<div class="border-4" v-if="shadowList[3]"></div>
									<image class="my-pic" :src="userInfo.avatarPath || '/static/icon/userIcon.png'"
										mode="aspectFill"></image>
								</div>
								<span class="name">本人 Me</span>

							</div>
							<div class="right" v-if="shadowList.length > 0">
								<div class="other-wrapper" v-if="shadowList[0]">
									<div class="wrapper-left">
										<div class="pic">
											<image class="user-img" @click="tohisCircle(shadowList[0].id)"
												:src="shadowList[0].avatarPath || '/static/guide/2.png'"
												mode="aspectFill"></image>
											<image class="add" v-if="shadowList[0].avatarPath"
												src="/static/icons/icon_jia.png" mode=""
												@click.stop="tofriendRequest(shadowList[0].id)"></image>
										</div>
										<span class="name">{{shadowList[0].nickname || '&nbsp;'}}</span>
									</div>
									<div class="wrapper-right"
										:style="shadowList[0].similarity?'opacity: 1;':'opacity: 0;'">
										{{shadowList[0].similarity}} 相似
									</div>
								</div>
								<div class="other-wrapper" v-if="shadowList[1]">
									<div class="wrapper-left">
										<div class="pic">
											<image class="user-img" @click="tohisCircle(shadowList[1].id)"
												:src="shadowList[1].avatarPath || '/static/guide/3.png'"
												mode="aspectFill"></image>
											<image class="add" v-if="shadowList[1].avatarPath"
												src="/static/icons/icon_jia.png" mode=""
												@click.stop="tofriendRequest(shadowList[1].id)"></image>
										</div>
										<span class="name">{{shadowList[1].nickname || '&nbsp;'}}</span>
									</div>
									<div class="wrapper-right"
										:style="shadowList[1].similarity?'opacity: 1;':'opacity: 0;'">
										{{shadowList[1].similarity}} 相似
									</div>
								</div>
								<div class="other-wrapper" v-if="shadowList[2]">
									<div class="wrapper-left">
										<div class="pic">
											<image class="user-img" @click="tohisCircle(shadowList[2].id)"
												:src="shadowList[2].avatarPath || '/static/guide/5.png'"
												mode="aspectFill"></image>
											<image class="add" v-if="shadowList[2].avatarPath"
												src="/static/icons/icon_jia.png" mode=""
												@click.stop="tofriendRequest(shadowList[2].id)"></image>
										</div>
										<span class="name">{{shadowList[2].nickname || '&nbsp;'}}</span>
									</div>
									<div class="wrapper-right"
										:style="shadowList[2].similarity?'opacity: 1;':'opacity: 0;'">
										{{shadowList[2].similarity}} 相似
									</div>
								</div>
								<div class="other-wrapper" v-if="shadowList[3]">
									<div class="wrapper-left">
										<div class="pic">
											<image class="user-img" @click="tohisCircle(shadowList[3].id)"
												:src="shadowList[3].avatarPath || '/static/guide/6.png'"
												mode="aspectFill"></image>
											<image class="add" v-if="shadowList[3].avatarPath"
												src="/static/icons/icon_jia.png" mode=""
												@click.stop="tofriendRequest(shadowList[3].id)"></image>
										</div>
										<span class="name">{{shadowList[3].nickname || '&nbsp;'}}</span>
									</div>
									<div class="wrapper-right"
										:style="shadowList[3].similarity?'opacity: 1;':'opacity: 0;'">
										{{shadowList[3].similarity}} 相似
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="tab-section" style="padding: 30rpx 40rpx;">
						<div class="tab-item active" @click="changePage()">
							换一换 replace
						</div>
						<div class="tab-item active" @click="reset()">
							重置 reset
						</div>
					</div>
				</div>
			</div>
		</div>
		<uni-popup ref="confirmPopup" type="center" :maskClick="true">
			<div class="confirm-info">
				<div class="info-title">提示</div>
				<div class="info-txt">1.我要保密：以保密形式记录“<span>{{clicked_tagName}}</span>”标签</div>
				<div class="info-txt">2.撤销保密：撤销已保密的“<span>{{clicked_tagName}}</span>”标签</div>
				<div class="btn-wrap">
					<div class="btn btn-left" @click="tagCancelSecret">撤销保密</div>
					<div class="btn btn-right" @click="tagSecret">我要保密</div>
				</div>
			</div>
		</uni-popup>
		<div class="point-number-wrapper">
			<div class="point-number" :style="'color:'+currentColor" v-show="showNumber">
				{{currentNumber>0? '+':''}}{{currentNumber}}
			</div>
		</div>
		<uni-popup ref="sendPopup" type="center" :maskClick="false">
			<div class="send-popup">
				<div class="send-head">
					<div class="textarea-wrap">
						<!-- <span class="num">{{formData.content.length}}/2000</span> -->
						<textarea maxlength="2000" v-model="formData.content"
							placeholder-style="color:#bcbcbc;padding:0;font-size:26rpx" placeholder="这一刻的想法…" />
					</div>
					<div class="send-btn" @click="submit()">
						发布
					</div>
				</div>
				<div class="upload-list">
					<div class="upload-item">
						<image mode="aspectFill" style="width: 60rpx;height: 60rpx;" :lazy-load="true"
							src="/static/icon/btn_mine_add.png" alt="" @click="handlerUpload()" />
					</div>
					<div class="upload-item" v-for="(item,index) in wordList" :key="index">
						<image class="del" src="/static/icon/icon_shanchu2.png" mode="" @click="del(index)"></image>
						<image :src="item.filePath" mode="aspectFill" @click="_previewImage(item.filePath)"></image>
					</div>
				</div>
				<div class="close" @click="closeSendPopup()">
					<image src="/static/icons/icon_guanbi.png" mode=""></image>
				</div>
			</div>
		</uni-popup>
		<div class="footer">
			<a href="https://beian.miit.gov.cn/#/Integrated/recordQuery">粤ICP备2022146056号</a>
			<a class="record" target="_blank"
				href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44011102003394">
				<img src="//img.ljcdn.com/beike/conch/1579143669032.png" />
				<div class="title">粤公网安备 44011102003394号</div>
			</a>
			<div class="dec">客服kefu@Lj5678.com </div>
			<div class="dec">所有网站版权归原网站所有 仅提供导航服务</div>
		</div>
	</div>
</template>

<script>
	import data from '@/js/index/index/data.js';
	import methods from '@/js/index/index/methods.js';
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	// 引入antv组件
	import F2 from '@/uni_modules/lime-f2/components/l-f2/f2-all.min.js';
	import {
		mapState
	} from 'vuex';
	import tag from "@/components/tag.vue";
	export default {
		data,
		methods,
		onLoad(e) {
			this.page = 1
			this.list_rows = 10
			// this.shadowList = []
			this.getTodayRecordList()

			this.getAllCategory()
			this.getTodayIndex()

			this.getMyAllLinks()
			this.getAllLinks()

			//个人中心
			this.getPageList()
			this.getTotelIndex()
			if (~navigator.userAgent.indexOf('Mobile')) {
				window.location.replace("https://m.lj5678.com");
			}
		},
		onShow() {

			this.getUserInfo()
			//判断地址是否为
			let hostname = window.location.hostname
			this.urlVerify = hostname == 'lj5678.com' || hostname == 'www.lj5678.com'
		},
		onReachBottom() {
			this.getTodayRecordList()
		},
		onHide() {
			console.log('on hide')
		},
		onUnload() {},
		computed: {
			...mapState(['userInfo']),
			bgHeight() {
				// #ifdef APP-PLUS
				return 250
				// #endif
				return this.navigationBarHeight + uni.upx2px(364);
			}
		},

		components: {
			uniPopup,
			tag
		}
	};
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	/* uni-page{
   	background-color: #FFFFFF;
   } */
</style>
<style scoped lang="scss">
	@import '~@/style/index/index.scss';
</style>